<!-- 1 定义组件模版 --> 
<template>
    <div class="goodsApp">
        进货信息 
        <fieldset >
            <legend>商品名称:</legend>
            <input type="text" v-model="name" />
        </fieldset>
        <fieldset >
            <legend>商品单价:</legend>
            <input type="text" v-model="price" />
        </fieldset>
        <fieldset >
            <legend>数量:</legend>
           <button type="button" style="border-radius: 2px; background-color: rgb(144, 156, 166);padding: 5px;" @click="increament(1)">+</button>
           <input type="text" v-model="count"  />
           <button type="button"  style="border-radius: 2px; background-color: rgb(144, 156, 166);padding: 5px;" @click="increament(-1)">-</button>
        </fieldset>
        <fieldset >
            <legend>商品总价:</legend>
            <!-- {{ cartStore.amount }} -->
            {{ amount }}
        </fieldset>

        <div>
            <button @click="changeStore">批量修改</button>
        </div>

        <div>
            <button @click="useAction">调用action方法</button>
        </div>
    </div>
</template> 

<!-- 2 定义组件逻辑 -->
<script setup lang="ts" name="PiniaDemo">
import { computed, reactive, ref, toRefs } from 'vue';

import { useCartStore } from "@/store/cart";
import { storeToRefs  } from "pinia";
const cartStore = useCartStore()

// console.log(
//   '%c cartStore: ',
//   'background-color: #3756d4; padding: 4px 8px; border-radius: 2px; font-size: 14px; color: #fff; font-weight: 700;',
//   cartStore 
// )






// const name = cartStore.name
// const price = cartStore.price
// const count = cartStore.count
// storeToRefs
let {price ,count,name,amount} = storeToRefs(cartStore);


// console.log("name",name);
// console.log("price",price);
// console.log("count",count);


//定义数据
// let name = ref('魔方法式软面包')
// let price = ref(19.8)
// let count = ref(1)



//计算属性
// let amount = computed(()=>{
//     return cartStore.amount
// })


function increament(num:number){
    // cartStore.count += num

    //写store
    // 第一种修改方式，直接修改
    // cartStore.count = cartStore.count  + num
    // if(cartStore.count>0){
        // console.log("2  ")
        cartStore.plusCount(num)
    // }
    
}


function changeStore(){
    // cartStore.count = 100;
    // cartStore.price = 20;
    // cartStore.name = cartStore.name +' 打折品';

    //第二种修改方式：批量修改
//     // cartStore.$patch({
//     //         name: '鲁花压榨葵花仁油5L--patch',
//     //         price: 18.8,
//     //         count: 5
//     //     })
}


function useAction(){
    
    // console.log(
    //   '%c cartStore: ',
    //   'background-color: #3756d4; padding: 4px 8px; border-radius: 2px; font-size: 14px; color: #fff; font-weight: 700;',
    //   cartStore
    // )

    cartStore.changePrice(999)
}


//编写一个插件  持久化存储
//订阅 store的数据发生变更的
// cartStore.$subscribe((mutation, state)=>{
//     localStorage.setItem("cartStoreState",JSON.stringify(state))
// })


</script> 
 
<!-- 3 定义样式 -->
<style scoped> 
 .goodsApp{
    width: 500px;
    border: solid 1px red;
    box-shadow: 0 0 20px pink;
 }
 

 input[count]{
    width: 40px;
    text-align: center;
 }
</style>